<template>
    <div>
        <div class="backGround"></div>
        <titleNav></titleNav>
        <div class="main">
            <div>

            </div>
            <img src="../../assets/aboutImg/about-ban.jpg" class="mainImg" width="100%">
            <div style="background-color: white">
                <div class="box1">
                    <div class="box1Left">
                        <div style="overflow: hidden">
                            <h2>公司简介</h2>
                        </div>
                        <h6>COMPANY PROFILE</h6>
                        <p class="box1Leftp">
                            尚云科技是一家从事大数据云计算、人工智能、产品开发、咨询服务为一体的综合型互联网科技公司。公司由一批BAT等一线互联网IT精英人士创建，以"快乐工作，认真生活"为愿景，以"科技与应用创新驱动发展"为使命，坚持"客户第一、诚信、激情、拥抱变化"的价值观，打造客户有依靠、员工有干劲、公司有前景的团队组织。</p>
                    </div>
                    <div class="box1Right">
                        <img src="../../assets/aboutImg/about_company.jpg" height="336" width="454x">
                    </div>
                </div>
            </div>
            <div>
                <div class="box2">
<!--                    //上面的标题-->
                    <div>
                        <div class="box2TitleOut">
                            <p class="box2Title">全新服务体验</p>
                            <p class="box2TitleSub">我们拥有丰富的互联网从业经验，为您提供专业级的技术服务</p>
                        </div>
                    </div>
<!--                    下面的四个正文-->
                    <div class="box2Min">
<!--                        //单独的一个，重复四次-->
                        <div class="box3MainIn">
                            <div style="height: 120px">
                                <div class="box3MinImg">
                                    <img src="../../assets/aboutImg/web_design.png"/>
                                </div>
                            </div>
                            <ul class="box2hn">
                                <li>网站设计</li>
                                <li>Website development</li>
                                <li>购物、企业网站开发</li>
                            </ul>
                        </div>
                        <!--                        //单独的一个，重复四次-->
                        <div class="box3MainIn">
                            <div style="height: 120px">
                                <div class="box3MinImg">
                                    <img src="../../assets/aboutImg/正方形手机.png">
                                </div>
                            </div>
                            <ul class="box2hn">
                                <li>微信应用</li>
                                <li>Wexin application</li>
                                <li>H5推广、宣传页、小程序、商城</li>
                            </ul>
                        </div>
                        <!--                        //单独的一个，重复四次-->
                        <div class="box3MainIn">
                            <div style="height: 120px">
                                <div class="box3MinImg">
                                    <img src="../../assets/aboutImg/system.png"/>
                                </div>
                            </div>
                            <ul class="box2hn">
                                <li>管理系统开发</li>
                                <li>management</li>
                                <li>库存、销售管理、办公系统</li>
                            </ul>
                        </div>
                        <!--                        //单独的一个，重复四次-->
                        <div class="box3MainIn">
                            <div style="height: 120px">
                                <div class="box3MinImg">
                                    <img src="../../assets/aboutImg/app.png">
                                </div>
                            </div>
                            <ul class="box2hn">
                                <li>APP 开发</li>
                                <li>App development</li>
                                <li>游戏、社交应用、购物支付</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box3">
                <ul class="box3Text">
                    <li>我们一直在超越：不断在成长，我们更用心：我们将更好：我们更努力成为第一</li>
                    <li>We’ve been transcending: Growing, We are more mindful: We will be better:</li>
                    <li>We are not the first, So we try harder</li>
                </ul>
            </div>
            <div class="box4">
                <div  class="box4ForBorder">
                    <div class="linerClass">
                        联系方式
                    </div>
                    <p class="linerClassSub">
                        CONTACT US
                    </p>
                    <div class="box4Bottom">
                        <div class="box4BottomIn">
                            <img src="../../assets/aboutImg/icon1.png"/><span>&nbsp;手机：186-3390-0235</span>
                        </div>
                        <div class="box4BottomIn">
                            <img src="../../assets/aboutImg/icon2.png"/><span>&nbsp;QQ： 66970457</span>
                        </div>
                        <div class="box4BottomIn">
                            <img src="../../assets/aboutImg/icon3.png"/><span>&nbsp;地址：河北省石家庄市方大科技园</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box5">
                <div class="linerClass">
                    地理坐标
                </div>
                <p class="linerClassSub">
                    COORDINATE
                </p>
<!--                //地图-->
<!--                为了嫌麻烦用div撑起20px的高度-->
                <div style="height: 20px"></div>
                <div id="container" class="map">

                </div>
            </div>

        </div>
        <footerBox></footerBox>
    </div>
</template>

<script>
    import titleNav from "../../components/titleNav";
    import AMapLoader from "@amap/amap-jsapi-loader";
    import footerBox from "../../components/footerBox";
    export default {
        name: "aboutUs",
        components: {
            titleNav,
            footerBox
        },
        created() {
            this.$store.commit('changePage', 5)
        },
        methods:{
            initMap() {
                AMapLoader.load({
                    "key": "bc7e20d8e43cd96b386b50b1ad48ef7f", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1
                        "plugins":[],       // 需要加载的 AMapUI ui插件
                    },
                }).then(AMap => {
                        this.map = new AMap.Map("container", {
                            //设置地图显示的缩放级别
                            zoom: 17,
                            // 是否允许鼠标拖拽
                            dragEnable: true,
                            // 鼠标滚轮放大缩小
                            scrollWheel: true,
                            // 双击放大缩小
                            doubleClickZoom: true,
                            // 键盘控制发达缩小移动旋转
                            keyboardEnable: false,
                            // 手势控制
                            touchZoom: false,
                            center: [114.6079443833618,38.01882842256343],//设置地图中心点坐标


                        });
                    var marker = new AMap.Marker({
                        position: [114.6079443833618,38.01882842256343], // 点标记在地图上显示的位置，数组内对应经纬度
                        title: '名称',
                        index: 1,
                        zoom: 13
                    });
                    this.map.add(marker);
                    let text = new AMap.Text({
                        text:'方大科技园',
                        position:[114.60745,38.0188],
                    })
                    this.map.add(text)
                    })
                    .catch(e => {
                        console.log(e);
                    });
            }
        },
        mounted() {
            this.initMap()
        }
    }
</script>

<style scoped lang="less">
    * {
        padding: 0px;
        margin: 0px;
    }

    .main {
        width: 100%;
        min-width: 1200px;
        margin: auto;
        padding-top: 70px;
    }

    .mainImg {
        display: block;
    }

    .backGround {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url("../../assets/aboutImg/service_bg.jpg");
        z-index: -2;
    }

    .box1 {
        margin: auto;
        width: 1200px;
        padding: 40px 0px;
        background-color: white;
        overflow: hidden;

        .box1Left {
            width: 50%;
            box-sizing: border-box;
            padding: 0px 10px;
            overflow: hidden;
            float: left;

            h2 {
                height: 31px;
                padding: 10px 0px;
                font-size: 24px;
                font-weight: 700;
                border-bottom: 1px solid rgb(102, 102, 102);
                float: left;
            }

            h6 {
                padding: 10px 0px 20px;
                font-size: 16px;
                font-weight: normal;
                font-family: "Microsoft YaHei UI";
            }

            .box1Leftp {
                width: 460px;
                font-size: 15px;
                font-weight: 700;
                line-height: 28px;
            }
        }

        .box1Right {
            float: left;
            width: 50px;
        }
    }

    .box2 {
        background-color: rgba(108, 99, 99, 0.32);
        padding-bottom: 40px;
        .box2TitleOut {
            margin: auto;
            overflow: hidden;
            width: 1200px;
            padding-bottom: 10px;
            padding-top: 20px;
        }
        .box2Title {
            font-family: 微软雅黑;
            font-size: 14px;
            font-weight: 500;
            width: 85px;
            margin: auto;
            height: 19px;
            color: white;
            border-bottom: 2px solid white;
            padding: 20px 0px 10px;
        }
        .box2TitleSub {
            font-family: 微软雅黑;
            font-size: 14px;
            font-weight: 500;
            width: 445px;
            text-align: center;
            margin: auto;
            height: 19px;
            color: white;
            padding-top: 10px;
        }
    }
    .box2Min {
        width: 1200px;
        margin: auto;
        padding-top: 20px;
        overflow: hidden;
    }
    .box3MainIn {
        width: 25%;
        box-sizing: border-box;
        margin: auto;
        float: left;
        position: relative;
        padding-top:40px ;
        height: 230px;
        .box3MinImg {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border-radius: 50%;
            background: #323f48;
            background-clip: content-box;

            img {
                width: 35px;
                height: 35px;
                margin: 33px;
                border: none;
            }
        }
        .box3MinImg:hover {
            position: relative;
            top: -5px;
            width: 110px;
            height: 110px;
            box-sizing: border-box;
            padding: 3px;
            border: 2px solid rgb(0, 127, 255);
            background-color: rgb(0, 127, 255);
            img {
                width: 38px;
                height: 38px;
                margin: 31px;
            }
        }
    }
    .box2hn {
        list-style: none;
        text-align: center;
        font-size: 14px;
        color: white;
        li {
            padding: 2px 0px;
        }
    }

    //box3相关内容
    .box3 {

        width: 100%;
        min-width: 1200px;
        height: 250px;
        background: url("../../assets/aboutImg/about_bottom_banner.gif");
        background-size: 100% 100%;
        background-clip: content-box;
    }
    .box3Text {
        padding-top: 50px;
    }
    .box3Text>li {
        width: 100%;
        padding: 10px 0px;
        color: white;
        text-align: center;
    }
    //box4
    .box4 {
        width: 100%;
        min-width: 1200px;
        background-color: white;

    }
    .box4ForBorder {
        border-bottom: 1px dashed #686868;
        width: 1200px;
        margin: auto;
        padding-bottom: 20px;
    }
    .linerClass {
        width: 70px;
        font-family: 微软雅黑;
        font-size: 14px;
        font-weight: 500;
        padding: 5px 0px;
        border-bottom: 1px solid black;
        margin: auto;
        text-align: center;
    }
    .linerClassSub {
        width: 100%;
        text-align: center;
        font-size: 14px;
        padding: 10px 0px 0px;
    }
    .box4Bottom {
        width: 970px;
        height: 50px;
        margin: auto;
        overflow: hidden;
        .box4BottomIn {
            float: left;
            width: 33.3%;
            text-align: center;
        }
        span {
            display: inline-block;
            line-height: 0px;
        }
        img {
            position: relative;
            top: 12px;
        }
    }
    .box5 {
        background-color: white;
        padding-bottom: 40px;
    }
    .map {
        width: 1170px;
        height: 379px;
        margin: auto;
        /*padding: 40px 0px;*/

    }
</style>